<template>
  <el-row>
    <el-col :span="4">
      <div class="grid-content bg-purple-dark">&emsp;</div>
    </el-col>
    <el-col :span="16">
      &emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;
      &emsp;&emsp;&emsp;&emsp;
      <div class="grid-content bg-purple-dark">
        <el-container>
          <!-- 顶部 数值统计 -->
          &emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;
          &emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;
          &emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;
          &emsp;&emsp;&emsp;&emsp;
          <el-header>
            <div>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div>
                    <el-statistic
                      group-separator=","
                      :precision="2"
                      :value="topInfo.contractNo"
                      :title="title1"
                    ></el-statistic>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div>
                    <el-statistic
                      group-separator=","
                      :precision="2"
                      :value="topInfo.repayPayable"
                      :title="title2"
                    ></el-statistic>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div>
                    <el-statistic
                      group-separator=","
                      :precision="2"
                      :value="topInfo.totalRepayAlready"
                      :title="title3"
                    ></el-statistic>
                  </div>
                </el-col>
                <el-row>
                  <el-button type="primary" round @click="toOverDue()"
                    >查看逾期</el-button
                  >
                </el-row>
              </el-row>
            </div>
          </el-header>
          <!-- 搜索框 -->
          &emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;
          &emsp;&emsp;&emsp;&emsp;
          <el-footer>
            <div class="grid-content bg-purple-light">
              <el-form
                :inline="true"
                :model="userAndPage.search"
                class="demo-form-inline"
              >
                <el-form-item>
                  <el-input
                    v-model="userAndPage.search"
                    placeholder="请输入合同编号查询"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="loadRepayList"
                    >查询</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </el-footer>
          <el-main>
            <template>
              <!-- 加载还款信息表 -->
              <el-table :data="repayList" style="width: 100%">
                <el-table-column prop="contractId" label="合同编号" width="80">
                </el-table-column>
                <el-table-column
                  prop="userinfoRealName"
                  label="真实姓名"
                  width="100"
                >
                </el-table-column>
                <el-table-column
                  prop="productName"
                  label="产品名称"
                  width="100"
                >
                </el-table-column>
                <el-table-column
                  prop="debitPrincipal"
                  label="借款本金"
                  width="100"
                >
                </el-table-column>
                <el-table-column
                  prop="productRate"
                  label="产品年利率"
                  width="100"
                >
                </el-table-column>
                <el-table-column
                  prop="repayAlready"
                  label="已还本金"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="amountRepayAlread"
                  label="已还总额"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="operation" label="操作" width="240">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      round
                      size="mini"
                      style="width: 90px"
                      @click="toContract(scope.row.contractId)"
                      >查看合同</el-button
                    >
                    <el-button
                      type="success"
                      round
                      size="mini"
                      style="width: 90px"
                      @click="toRepayInfo(scope.row.contractId)"
                      >点击还款</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <!-- ----------分页表单--------- -->
            &emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;
            &emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="userAndPage.currentPage"
              :page-sizes="page.pageSizes"
              :page-size="userAndPage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </el-main>
        </el-container>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-content bg-purple-dark">&emsp;</div>
    </el-col>
  </el-row>
</template>

<script>
import { EventBus } from "../../router/event-bus.js";
export default {
  data() {
    return {
      userAndPage: {
        //传给后端的值
        userId: 0,
        contractId:"",
        currentPage: 1,
        pageSize: 5,
        search: "",
      },
      repayList: [], //还款列表
      topInfo: [], //后端返回的页面顶部信息
      title1: "合同数量",
      title2: "应还本金",
      title3: "已还本金",
      screenHeight: document.documentElement.clientHeight + "px",
      page: {
        pageSizes: [2, 5, 10],
        total: 0,
      },
    };
  },
  methods: {
    loadRepayList() {
      this.$axios.post("/repay/query", this.userAndPage).then((res) => {
        if (res.data.code == 200) {
          this.repayList = res.data.data.repayList;
          this.topInfo = res.data.data.topInfo;
          this.page.total = res.data.data.total;
          for (let i = 0; i < this.repayList.length; i++) {
            this.repayList[i].productRate =
              this.repayList[i].productRate * 100 + "%";
          }
        } else {
          this.$message.error("操作错误");
        }
      });
    },
    // toContract(id) {
    //   // this.$axios.get("/contract/" + id).then((res) => {
    //   //           this.user = res.data.data.user;
    //   //           this.$router.push("/Contract");
    //   //       });
    //   this.$router.push("/Contract");
    // },
    toRepayInfo(id) {
      this.$router.push('/RepayInfo'+id);
    },
    toOverDue() {
      this.$router.push('/OverDue'+this.userAndPage.userId);
    },
    handleSizeChange(val) {
      //当每页数据改变时
      this.userAndPage.pageSize = val;
      this.loadRepayList();
    },
    handleCurrentChange(val) {
      //当点击页码时
      this.userAndPage.currentPage = val;
      this.loadRepayList();
    },
  },

  mounted() {
    this.userAndPage.userId=this.$route.params.uid;
    alert(this.$route.params.uid);
    alert(this.userAndPage.userId);
    this.loadRepayList();
  },
  beforeDestroy() {
    EventBus.$emit("aaa", 1);
  },
};
</script>
